<template>
    <main class="main">
      <aside class="left">
        <Aside />
      </aside>
      <article class="right">
        <UserForm />
      </article>
    </main>
</template>

<script>
console.log('loading login');
import request from '../../utils/request'
import Aside from './components/Aside.vue'
import UserForm from './components/UserForm.vue'
import Card from '@/components/Card.vue'
export default {
  name: "Login",
  components:{
    Aside,
    UserForm,
    Card
  },
  mounted(){
    
  },
  data(){
    return {
      UserForm
    }
  },
  methods:{
    async handleSubmit(e){
        e.preventDefault()
        const form = this.$refs.form
        const formData = new FormData(form)
        const res = {}
        formData.forEach((value,key) => {
            res[key] = value
        })
        try {
            const reqRes = await request({
                url: '/user/add',
                options:{
                    method: 'POST',
                    body: res,
                    headers:{
                        'Content-Type': 'application/json;charset=utf-8'
                    }
                }
            })
            const curUser = {
              id: reqRes.data.id,
              name: res.userName
            }
            localStorage.setItem('user',JSON.stringify(curUser))
            this.$router.push({
              path: '/chat'
            })
        } catch (error) {
            console.log(error);
        }
    },
  },
};
</script>

<style lang='less' scoped>
  .main {
    display: flex;
    .left {
      width: 480px;
      height: 100vh;
    }
    .right{
      flex: 1;
      padding: 24px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
</style>